<template>
  <section>
    <el-form label-width="80px" inline>
      <el-form-item label="地震年份">
        <el-input-number
          v-model="form.startYear"
          controls-position="right"
          :min="0"
          :max="9999"
        ></el-input-number>
        <span> ~ </span>
        <el-input-number
          v-model="form.endYear"
          controls-position="right"
          :min="0"
          :max="9999"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="地震月份">
        <el-input-number
          v-model="form.startMonth"
          controls-position="right"
          :min="1"
          :max="12"
        ></el-input-number>
        <span> ~ </span>
        <el-input-number
          v-model="form.endMonth"
          controls-position="right"
          :min="1"
          :max="12"
        ></el-input-number>
      </el-form-item>
      <br/>
      <el-form-item label="地震震级">
        <el-input-number
          v-model="form.magnitudeGt"
          controls-position="right"
          :min="0"
          :max="10"
          :step="0.1"
        ></el-input-number>
        <span> ~ </span>
        <el-input-number
          v-model="form.magnitudeLt"
          controls-position="right"
          :min="0"
          :max="10"
          :step="0.1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="震源深度">
        <el-input-number
          v-model="form.depthGt"
          controls-position="right"
          :min="0"
          :max="10"
          :step="0.1"
        ></el-input-number>
        <span> ~ </span>
        <el-input-number
          v-model="form.depthLt"
          controls-position="right"
          :min="0"
          :max="10"
          :step="0.1"
        ></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-row>
        <el-col :span="17">
          <div ref="chart" style="width: 100%; height: 800px;"></div>
        </el-col>
        <el-col :span="7">
          <div ref="chart2" style="height: 700px;text-align:center;"></div>
        </el-col>
      </el-row>
    </div>

  </section>
  </template>

  <script>
  import * as echarts from 'echarts/core';
  import { ScatterChart } from 'echarts/charts';
  import { GeoComponent } from 'echarts/components';
  import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';
  import worldMap from './china.json';
  import { selectCity,getCity } from "@/api/geo/geo";
  export default {
    data() {
      return {
        form: {
          startYear: null,
          endYear: null,
          startMonth:null,
          endMonth:null,
          magnitudeGt:null,
          magnitudeLt:null,
          depthGt: null,
          depthLt: null
        },
        chartData: {
          xAxisData: [],
          seriesData: []
        },
      };
    },
    created() {
      this.getData();
    },
    mounted() {

    },
    methods:{
      initChart2() {
        const chartDom = this.$refs.chart2
        const myChart = echarts.init(chartDom)
        const position = 'left'
        const option = {
          title: {
            text: '中国各省地震次数',
            subtext: "",
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: 80,
            bottom: 30
          },
          xAxis: {
            type: 'value',
            position: 'top',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          yAxis: {
            type: 'category',
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: true },
            data: this.chartData.xAxisData
          },
          series: [
            {
              name: 'Cost',
              type: 'bar',
              stack: 'Total',
              label: {
                show: true,
                formatter: '{b}'
              },
              data:this.chartData.seriesData
            }
          ]
        };
        myChart.setOption(option)
      },
      getData() {
        let params = {...this.form};
        this.removeZeroProps(params)
        selectCity(params).then((res) => {
          let data = res.data;
          this.initChart(data);
        });
        getCity(params).then((res) => {
          this.chartData.xAxisData = res.data[0];
          this.chartData.seriesData =res.data[1];
          this.initChart2();
        });
      },
      reset(){
        this.form = {};
        this.getData();
      },
      removeZeroProps(obj) {
        for (let prop in obj) {
          if (obj[prop] === 0) {
            delete obj[prop];
          }
        }
        return obj;
      },
      initChart(data){
        echarts.registerMap('world', { geoJSON: worldMap })
        // 注册必须的组件
        echarts.use([TitleComponent, TooltipComponent, LegendComponent, GeoComponent, ScatterChart, CanvasRenderer]);


        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(this.$refs.chart);

        // 指定图表的配置项和数据
        const option = {
          title: {
            text: '全国1965-2016年地震概况',
            subtext: "",
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false,
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['地震概况']
          },
          /*  visualMap: {
              min: 0,
              max: 300,
              calculable: true,
              inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
              },
              textStyle: {
                color: '#fff'
              }
            },*/
          geo: {
            map: 'world',
            roam: true,
            silent: true,
            itemStyle: {
              areaColor: '#323c48',
              borderColor: '#111'
            }
          },
          series: [
            {
              name: '地震概况',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: data,
              /*symbolSize: function (val) {
                return val[2] / 10;
              },*/
              label: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              itemStyle: {
                color: '#ddb926'
              }
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    },
  };
  </script>

  <style>
    /* 可选的样式 */
  </style>
